<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>薪酬标准列表</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
</head>
<body>
<style>
    body {
        margin: 0;
        font-family: Arial, sans-serif;
    }

    /* 导航栏样式 */
    .navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #333;
        padding: 10px 20px;
        color: white;
    }

    .navbar .logo img {
        height: 40px;
    }

    .navbar .system-name {
        flex: 1;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
    }

    .navbar .titles a {
        text-decoration: none;
        color: white;
        font-weight: bold;
    }

    .navbar .titles a:hover {
        text-decoration: underline;
    }

    /* 页面布局 */
    .main-container {
        display: flex;
        height: calc(100vh - 60px); /* 除去导航栏的高度 */
    }

    /* 左侧垂直菜单样式 */
    .sidebar {
        width: 200px;
        border-right: 1px solid #ccc;
        background-color: #f9f9f9;
        padding: 10px;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    }

    .menu-item {
        position: relative;
        cursor: pointer;
        padding: 10px;
        border-bottom: 1px solid #eee;
    }

    .menu-item:hover {
        background-color: #e0e0e0;
    }

    .menu-item:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        background-color: #333;
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        white-space: nowrap;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .submenu {
        display: none;
        background-color: #fff;
        padding-left: 20px;
        margin-top: 5px;
        border-left: 2px solid #ccc;
    }

    .submenu a {
        display: block;
        padding: 5px 0;
        color: #333;
        text-decoration: none;
    }

    .submenu a:hover {
        text-decoration: underline;
    }

    .menu-item.active .submenu {
        display: block;
    }

    /* 右侧内容框样式 */
    .content {
        flex: 1;
        padding: 20px;
        background-color: #fff;
        overflow-y: auto;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    }

    .content h1 {
        margin-top: 0;
    }

    /* 表单样式 */
    .form-container {
        max-width: 800px;
        margin: 0 auto;
        background: white;
        padding: 20px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }

    .form-container h1 {
        text-align: center;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }

    .form-group input, .form-group select, .form-group textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
    }

    .form-group textarea {
        resize: vertical;
    }

    .form-actions {
        text-align: center;
        margin-top: 20px;
    }

    .form-actions button {
        padding: 10px 20px;
        font-size: 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .form-actions .btn-submit {
        background-color: #4CAF50;
        color: white;
    }

    .form-actions .btn-reset {
        background-color: #f44336;
        color: white;
        margin-left: 10px;
    }
</style>
<!-- 顶部导航栏 -->
<div class="navbar">
    <div class="logo">
        <img src="/image/校徽.png" alt="图标">
    </div>
    <div class="system-name">人力资源管理系统</div>
    <div class="titles">
        <a href="index_jingli.jsp">首页</a>
        <a href="humanQuery">关于</a>
        <a href="#contact">联系我们</a>
    </div>
</div>

<!-- 页面主体布局 -->
<div class="main-container">
    <!-- 左侧垂直菜单 -->
    <div class="sidebar">
        <div class="menu-item" data-tooltip="人力资源管理模块">
            人力资源管理模块
            <div class="submenu">
                <a href="humanAdd_jingli.jsp">添加档案</a>
                <a href="humanQuery">档案查询和管理</a>
            </div>
        </div>
        <div class="menu-item" data-tooltip="管理薪酬">薪酬管理模块
            <div class="submenu">
                <a href="salaryStandard.jsp">薪酬标准制定</a>
                <a href="salaryQuery.jsp">薪酬标准列表</a>
            </div></div>

    </div>
<div class="container">
    <h2 class="mt-4">薪酬标准列表</h2>
    <table class="table table-bordered mt-3">
        <thead>
        <tr>
            <th>薪酬标准ID</th>
            <th>薪酬标准名称</th>
            <th>制定人</th>
            <th>登记时间</th>
        </tr>
        </thead>
        <tbody id="salary-table-body">
        <!-- 数据行会通过 JavaScript 动态填充 -->
        </tbody>
    </table>
</div>

<script>
    window.onload = function () {
        fetch("/cpi/salary-standards")  // 获取数据
            .then(response => response.json())  // 获取 JSON 格式的数据
            .then(data => {
                // 获取表格的 tbody 元素
                let tableBody = document.getElementById('salary-table-body');
                tableBody.innerHTML = '';  // 清空表格内容

                // 渲染数据到表格
                data.forEach(salary => {
                    // 创建一行
                    let row = document.createElement('tr');

                    // 创建列数据，保留薪酬标准ID、薪酬标准名称、制定人、登记时间
                    let columns = [
                        salary.salary_id,
                        salary.salary_standard_name,
                        salary.creator_name,
                        salary.registration_time ? salary.registration_time : '无'
                    ];

                    // 填充列数据
                    columns.forEach(value => {
                        let cell = document.createElement('td');
                        cell.textContent = value;
                        row.appendChild(cell);
                    });

                    // 将新行添加到 tbody 中
                    tableBody.appendChild(row);
                });
            })
            .catch(error => {
                console.error('请求失败:', error);  // 请求错误时的错误提示
            });
    };

    // JavaScript 实现下拉菜单功能
    document.querySelectorAll('.menu-item').forEach(item => {
        item.addEventListener('click', () => {
            // 切换 active 类，控制子菜单显示/隐藏
            item.classList.toggle('active');
        });
    });
</script>
</body>
</html>